<template>
  <div :class="{'mobile-detail-wrap': showMobilePage}" class="write-off-data-wrap">
    <div class="title-box mb10">
      <div v-if="!showMobilePage" class="flex-center">
        <Title title="封账统计" style="flex: unset;" />
        <div class="data-info-box">
          <data-info-item :is-dot="true" :label-color="'#999999'" class="media-type-one" label="封账月份:">
            <span slot="content">
              <span v-if="writeOffData">
                {{ formatMonth(writeOffData.sealMonth) }}
              </span>
              <span v-else>--</span>
            </span>
          </data-info-item>
          <data-info-item :is-dot="true" :label-color="'#999999'" class="media-type-two" label="最新提交时间:">
            <div slot="content">
              <div v-if="writeOffData && false" class="launch-time">
                <span class="nowrap">{{ formatMonth(writeOffData.sealCreateDate) }}</span>
                <el-tooltip v-if="showRefreshTime" class="big-refresh-btn" placement="top">
                  <div slot="content" class="w200 lh16">刷新封账发起时间，封账数据将根据当前时间获取最新数据</div>
                  <span class="empty-btn-style" @click="refreshData">刷新<em class="el-icon-refresh" /></span>
                </el-tooltip>
                <el-tooltip v-if="showRefreshTime" class="refresh-btn" placement="top">
                  <div slot="content" class="w200 lh16">刷新封账发起时间，封账数据将根据当前时间获取最新数据</div>
                  <div class="refresh-btn" @click="refreshData">
                    <em class="el-icon-refresh" />
                  </div>
                </el-tooltip>
              </div>
              <span v-if="writeOffData && writeOffData.sealCreateDate">{{ formatMonth(writeOffData.sealCreateDate) }}</span>
              <span v-else>--</span>
            </div>
          </data-info-item>
          <data-info-item :is-dot="true" :label-color="'#999999'" label="封账发起人:">
            <span slot="content">
              <span v-if="writeOffData">
                {{ writeOffData.sealCreator ? writeOffData.sealCreator : '--' }}
              </span>
              <span v-else>--</span>
            </span>
          </data-info-item>
          <div v-if="!showMobilePage" style="flex: 1" />
          <div v-if="!showMobilePage" class="toggle" @click="toggle"><span>{{ isOpen ? '收起' : '展开' }}</span><em :class="[isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down']" /></div>
          <el-tooltip v-if="!showMobilePage" class="item" effect="dark" content="复制封账统计数据到剪贴板" placement="top">
            <el-button type="info" size="small" class="back-btn empty-btn-style" @click="onCopyClick">复制数据</el-button>
          </el-tooltip>
        </div>
      </div>
    </div>
    <template v-if="showMobilePage">
      <div class="flex-center" style="justify-content: space-between;">
        <Title title="封账统计" style="flex: unset;" />
        <div class="title-btn">
          <el-button type="text" size="small" @click="onCopyClick">复制数据</el-button>
          <div class="line" />
          <div class="toggle" @click="toggle"><span>{{ isOpen ? '收起' : '展开' }}</span><em :class="[isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down']" /></div>
        </div>
      </div>
      <div class="data-info-box-mobile">
        <data-info-item :show-mobile-page="showMobilePage" class="media-type-one" label="封账月份:">
          <span slot="content">
            <span v-if="writeOffData" class="bold">
              {{ writeOffData.sealMonth ? writeOffData.sealMonth : '--' }}
            </span>
            <span v-else>--</span>
          </span>
        </data-info-item>
        <data-info-item :show-mobile-page="showMobilePage" class="media-type-two" label="最新提交时间:">
          <div slot="content">
            <div v-if="writeOffData && false" class="launch-time">
              <span class="nowrap">{{ formatMonth(writeOffData.sealCreateDate) }}</span>
              <el-tooltip v-if="showRefreshTime" class="big-refresh-btn" placement="top">
                <div slot="content" class="w200 lh16">刷新封账发起时间，封账数据将根据当前时间获取最新数据</div>
                <span class="empty-btn-style" @click="refreshData">刷新<em class="el-icon-refresh" /></span>
              </el-tooltip>
              <el-tooltip v-if="showRefreshTime" class="refresh-btn" placement="top">
                <div slot="content" class="w200 lh16">刷新封账发起时间，封账数据将根据当前时间获取最新数据</div>
                <div class="refresh-btn" @click="refreshData">
                  <em class="el-icon-refresh" />
                </div>
              </el-tooltip>
            </div>
            <span v-if="writeOffData && writeOffData.sealCreateDate" class="nowrap bold">{{ formatMonth(writeOffData.sealCreateDate) }}</span>
            <span v-else>--</span>
          </div>
        </data-info-item>
        <data-info-item :show-mobile-page="showMobilePage" label="封账发起人:">
          <span slot="content">
            <span v-if="writeOffData" class="bold">
              {{ writeOffData.sealCreator ? writeOffData.sealCreator : '--' }}
            </span>
            <span v-else>--</span>
          </span>
        </data-info-item>
      </div>
    </template>
    <div>
      <div class="seal-data-content">
        <div v-if="!showMobilePage" :class="[isOpen ? 'h-hight' : (showMobilePage ? 'h100' : 'h40')]" class="seal-data-column seal-data-column-data">
          <div class="seal-data-column seal-data-column-more">
            <stair-data-item :icon-image="totalOderAmount" :write-off-data="writeOffData" :is-right-border="false" :icon-index="0" label="本次总封账订单" prop-name="sealTotalAmount" tip="本封账单中的订单的总金额" />
            <div class="second-level-item-wrap second-level-item-wrap-br">
              <second-level-item
                :write-off-data="writeOffData"
                :prop-arr="['monthOrderSealAmount']"
                :prop-name-arr="[`${month}月订单封账`]"
                :simple-prop-name-arr="[`${month}月`]"
                :tips="[`本封账单中的订单，属于${month}月的订单的总金额`]"
                unify-name="订单封账"
              />
              <second-level-item
                :write-off-data="writeOffData"
                :prop-arr="['hisOrderSealAmount']"
                :prop-name-arr="['历史订单封账']"
                :simple-prop-name-arr="['历史']"
                :tips="[`本封账单中的订单，属于${month}月之前的订单的总金额`]"
                unify-name="订单封账"
              />
            </div>
            <more-amount-item
              v-show="isOpen"
              :write-off-data="writeOffData"
              :show-mobile-page="showMobilePage"
              :prop-arr="['monthOrderUnchargeAmount', 'newMonthOrderUnchargeAmount', 'hisOrderUnchargeAmount', 'newHisOrderUnchargeAmount']"
              :prop-name-arr="[`${month}月订单待核销`, `${month}月订单最新待核销`, '历史订单待核销', '历史订单最新待核销']"
              :tips="[
                `本封账单中的${month}月订单下【未核销金额】或【已完成但未参与本封账单封账的核销金额】的总和`,
                `本封账单中的${month}月订单下最新未核销金额的总和`,
                `本封账单中的${month}月之前订单下【未核销金额】或【已完成但未参与本封账单封账的核销金额】的总和`,
                `本封账单中的${month}月之前订单下最新未核销金额的总和`
              ]"
            />
          </div>
          <div class="seal-data-column seal-data-column-more">
            <stair-data-item :icon-image="monthFlowChargeFlow" :write-off-data="writeOffData" :is-right-border="false" :icon-index="1" label="本次总封账流水" prop-name="sealTotalFlow" tip="本封账单中的流水的总金额" />
            <div class="second-level-item-wrap second-level-item-wrap-br">
              <second-level-item
                :write-off-data="writeOffData"
                :prop-arr="['monthFlowSealAmount']"
                :prop-name-arr="[`${month}月流水封账`]"
                :simple-prop-name-arr="[`${month}月`]"
                :tips="[`本封账单中的流水，属于${month}月的流水的总金额`]"
                unify-name="流水封账"
              />
              <second-level-item
                :write-off-data="writeOffData"
                :prop-arr="['hsFlowSealAmount']"
                :prop-name-arr="['历史流水封账']"
                :simple-prop-name-arr="['历史']"
                :tips="[`本封账单中的流水，属于${month}月之前的流水的总金额`]"
                unify-name="流水封账"
              />
            </div>
            <more-amount-item
              v-show="isOpen"
              :write-off-data="writeOffData"
              :show-mobile-page="showMobilePage"
              :prop-arr="['monthFlowUnchargeAmount', 'newMonthFlowUnchargeAmount', 'hisFlowUnchargeAmount', 'newHisFlowUnchargeAmount']"
              :prop-name-arr="[`${month}月流水待核销`, `${month}月流水最新待核销`, '历史流水待核销', '历史流水最新待核销']"
              :tips="[
                `本封账单中的${month}月流水下【未核销金额】或【已完成但未参与本封账单封账的核销金额】的总和`,
                `本封账单中的${month}月流水下最新未核销金额的总和`,
                `本封账单中的${month}月之前流水下【未核销金额】或【已完成但未参与本封账单封账的核销金额】的总和`,
                `本封账单中的${month}月之前流水下最新未核销金额的总和`
              ]"
            />
          </div>
          <div class="seal-data-column seal-data-column-more">
            <stair-data-item :icon-image="monthUnChargeOff" :write-off-data="writeOffData" :is-right-border="false" :icon-index="2" label="本次总封账核销" prop-name="sealTotalChargeOff" tip="本封账单中的核销记录的总金额"/>
            <div class="second-level-item-wrap second-level-item-wrap-br">
              <second-level-item
                :write-off-data="writeOffData"
                :prop-arr="['monthOrderSealChargeAmount']"
                :prop-name-arr="[`${month}月订单核销封账`]"
                :simple-prop-name-arr="[`${month}月`]"
                :tips="[`本封账单中的核销记录，属于${month}月订单的核销总金额`]"
                unify-name="订单核销封账"
              />
              <second-level-item
                :write-off-data="writeOffData"
                :prop-arr="['hisOrderSealChargeAmount']"
                :prop-name-arr="['历史订单核销封账']"
                :simple-prop-name-arr="['历史']"
                :tips="['本封账单中的核销记录，属于历史订单的核销总金额']"
                unify-name="订单核销封账"
              />
            </div>
            <more-amount-item
              v-show="isOpen"
              :write-off-data="writeOffData"
              :show-mobile-page="showMobilePage"
              :prop-arr="['monthOrderFlowChargeAmount', 'monthOrderHisFlowChargeAmount', 'monthHisOrderFlowChargeAmount', 'hisOrderFlowChargeAmount', 'newMonthOrderFlowChargeAmount', 'newOrderHisFlowChargeAmount']"
              :prop-name-arr="[`${month}月订单该月流水核销`, `${month}月订单历史流水核销`, `历史订单${month}月流水核销`, '历史订单历史流水核销', `最新订单${month}月流水核销`, '最新订单历史流水核销']"
              :tips="[
                `本封账单中的核销记录，属于${month}月订单且${month}月流水的核销总金额`,
                `本封账单中的核销记录，属于${month}月订单且${month}月之前流水的核销总金额`,
                `本封账单中的核销记录，属于历史订单且${month}月流水的核销总金额`,
                `本封账单中的核销记录，属于历史订单且${month}月之前流水的核销总金额`,
                `本封账单中的核销记录，属于${month}月之后订单且${month}月流水的核销总金额`,
                `本封账单中的核销记录，属于${month}月之后订单且${month}月之前流水的核销总金额`
              ]"
            />
          </div>
          <div class="seal-data-column seal-data-column-more">
            <stair-data-item :icon-image="monthUnChargeOff" :write-off-data="writeOffData" :is-right-border="false" :icon-index="3" label="本次总封账成本" prop-name="sealTotalCostAmount" tip="本封账单中的成本的总金额"/>
            <div class="second-level-item-wrap">
              <second-level-item
                :write-off-data="writeOffData"
                :prop-arr="['monthCostSealAmount']"
                :prop-name-arr="[`${month}月成本封账`]"
                :simple-prop-name-arr="[`${month}月`]"
                :tips="[`本封账单中的成本，属于${month}月的成本的总金额`]"
                unify-name="成本封账"
              />
              <second-level-item
                :write-off-data="writeOffData"
                :prop-arr="['hisCostSealAmount']"
                :prop-name-arr="['历史成本封账']"
                :simple-prop-name-arr="['历史']"
                :tips="[`本封账单中的成本，属于${month}月之前的成本的总金额`]"
                unify-name="成本封账"
              />
            </div>
          </div>
        </div>
        <div v-else>
          <div :class="[isOpen ? 'h-hight' : (showMobilePage ? 'h100' : 'h40')]" class="seal-data-column seal-data-column-data" style="margin-bottom: 16px;">
            <div class="seal-data-column seal-data-column-more">
              <stair-data-item :icon-image="totalOderAmount" :write-off-data="writeOffData" :is-right-border="false" :icon-index="0" label="本次总封账订单" prop-name="sealTotalAmount" tip="本封账单中的订单的总金额" />
              <div class="second-level-item-wrap">
                <second-level-item
                  :write-off-data="writeOffData"
                  :prop-arr="['monthOrderSealAmount']"
                  :prop-name-arr="[`${month}月订单封账`]"
                  :simple-prop-name-arr="[`${month}月`]"
                  :tips="[`本封账单中的订单，属于${month}月的订单的总金额`]"
                  unify-name="订单封账"
                />
                <second-level-item
                  :write-off-data="writeOffData"
                  :prop-arr="['hisOrderSealAmount']"
                  :prop-name-arr="['历史订单封账']"
                  :simple-prop-name-arr="['历史']"
                  :tips="[`本封账单中的订单，属于${month}月之前的订单的总金额`]"
                  unify-name="订单封账"
                />
              </div>
              <more-amount-item
                v-show="isOpen"
                :write-off-data="writeOffData"
                :show-mobile-page="showMobilePage"
                :prop-arr="['monthOrderUnchargeAmount', 'newMonthOrderUnchargeAmount', 'hisOrderUnchargeAmount', 'newHisOrderUnchargeAmount']"
                :prop-name-arr="[`${month}月订单待核销`, `${month}月订单最新待核销`, '历史订单待核销', '历史订单最新待核销']"
                :tips="[
                  `本封账单中的${month}月订单下【未核销金额】或【已完成但未参与本封账单封账的核销金额】的总和`,
                  `本封账单中的${month}月订单下最新未核销金额的总和`,
                  `本封账单中的${month}月之前订单下【未核销金额】或【已完成但未参与本封账单封账的核销金额】的总和`,
                  `本封账单中的${month}月之前订单下最新未核销金额的总和`
                ]"
              />
            </div>
            <div class="seal-data-column seal-data-column-more">
              <stair-data-item :icon-image="monthFlowChargeFlow" :write-off-data="writeOffData" :is-right-border="false" :icon-index="1" label="本次总封账流水" prop-name="sealTotalFlow" tip="本封账单中的流水的总金额" />
              <div class="second-level-item-wrap">
                <second-level-item
                  :write-off-data="writeOffData"
                  :prop-arr="['monthFlowSealAmount']"
                  :prop-name-arr="[`${month}月流水封账`]"
                  :simple-prop-name-arr="[`${month}月`]"
                  :tips="[`本封账单中的流水，属于${month}月的流水的总金额`]"
                  unify-name="流水封账"
                />
                <second-level-item
                  :write-off-data="writeOffData"
                  :prop-arr="['hsFlowSealAmount']"
                  :prop-name-arr="['历史流水封账']"
                  :simple-prop-name-arr="['历史']"
                  :tips="[`本封账单中的流水，属于${month}月之前的流水的总金额`]"
                  unify-name="流水封账"
                />
              </div>
              <more-amount-item
                v-show="isOpen"
                :write-off-data="writeOffData"
                :show-mobile-page="showMobilePage"
                :prop-arr="['monthFlowUnchargeAmount', 'newMonthFlowUnchargeAmount', 'hisFlowUnchargeAmount', 'newHisFlowUnchargeAmount']"
                :prop-name-arr="[`${month}月流水待核销`, `${month}月流水最新待核销`, '历史流水待核销', '历史流水最新待核销']"
                :tips="[
                  `本封账单中的${month}月流水下【未核销金额】或【已完成但未参与本封账单封账的核销金额】的总和`,
                  `本封账单中的${month}月流水下最新未核销金额的总和`,
                  `本封账单中的${month}月之前流水下【未核销金额】或【已完成但未参与本封账单封账的核销金额】的总和`,
                  `本封账单中的${month}月之前流水下最新未核销金额的总和`
                ]"
              />
            </div>
          </div>
          <div :class="[isOpen ? 'h-hight' : (showMobilePage ? 'h100' : 'h40')]" class="seal-data-column seal-data-column-data">
            <div class="seal-data-column seal-data-column-more">
              <stair-data-item :icon-image="monthUnChargeOff" :write-off-data="writeOffData" :is-right-border="false" :icon-index="2" label="本次总封账核销" prop-name="sealTotalChargeOff" tip="本封账单中的核销记录的总金额"/>
              <div class="second-level-item-wrap">
                <second-level-item
                  :write-off-data="writeOffData"
                  :prop-arr="['monthOrderSealChargeAmount']"
                  :prop-name-arr="[`${month}月订单核销封账`]"
                  :simple-prop-name-arr="[`${month}月`]"
                  :tips="[`本封账单中的核销记录，属于${month}月订单的核销总金额`]"
                  unify-name="订单核销封账"
                />
                <second-level-item
                  :write-off-data="writeOffData"
                  :prop-arr="['hisOrderSealChargeAmount']"
                  :prop-name-arr="['历史订单核销封账']"
                  :simple-prop-name-arr="['历史']"
                  :tips="['本封账单中的核销记录，属于历史订单的核销总金额']"
                  unify-name="订单核销封账"
                />
              </div>
              <more-amount-item
                v-show="isOpen"
                :write-off-data="writeOffData"
                :show-mobile-page="showMobilePage"
                :prop-arr="['monthOrderFlowChargeAmount', 'monthOrderHisFlowChargeAmount', 'monthHisOrderFlowChargeAmount', 'hisOrderFlowChargeAmount', 'newMonthOrderFlowChargeAmount', 'newOrderHisFlowChargeAmount']"
                :prop-name-arr="[`${month}月订单该月流水核销`, `${month}月订单历史流水核销`, `历史订单${month}月流水核销`, '历史订单历史流水核销', `最新订单${month}月流水核销`, '最新订单历史流水核销']"
                :tips="[
                  `本封账单中的核销记录，属于${month}月订单且${month}月流水的核销总金额`,
                  `本封账单中的核销记录，属于${month}月订单且${month}月之前流水的核销总金额`,
                  `本封账单中的核销记录，属于历史订单且${month}月流水的核销总金额`,
                  `本封账单中的核销记录，属于历史订单且${month}月之前流水的核销总金额`,
                  `本封账单中的核销记录，属于${month}月之后订单且${month}月流水的核销总金额`,
                  `本封账单中的核销记录，属于${month}月之后订单且${month}月之前流水的核销总金额`
                ]"
              />
            </div>
            <div class="seal-data-column seal-data-column-more">
              <stair-data-item :icon-image="monthUnChargeOff" :write-off-data="writeOffData" :is-right-border="false" :icon-index="3" label="本次总封账成本" prop-name="sealTotalCostAmount" tip="本封账单中的成本的总金额"/>
              <div class="second-level-item-wrap">
                <second-level-item
                  :write-off-data="writeOffData"
                  :prop-arr="['monthCostSealAmount']"
                  :prop-name-arr="[`${month}月成本封账`]"
                  :simple-prop-name-arr="[`${month}月`]"
                  :tips="[`本封账单中的成本，属于${month}月的成本的总金额`]"
                  unify-name="成本封账"
                />
                <second-level-item
                  :write-off-data="writeOffData"
                  :prop-arr="['hisCostSealAmount']"
                  :prop-name-arr="['历史成本封账']"
                  :simple-prop-name-arr="['历史']"
                  :tips="[`本封账单中的成本，属于${month}月之前的成本的总金额`]"
                  unify-name="成本封账"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Title from '@/components/Title';
import StairDataItem from './stairDataItem';
import SecondLevelItem from './secondLevelItem';
import MoreAmountItem from './moreAmountItem';
import DataInfoItem from '@/components/DataInfoItem';
import { sealBillRefresh } from '@/api/sealingAccount';
import { bigNumFilter } from '@/filters/number';
import monthUnChargeOff from '@/assets/monthUnChargeOff.png';
import monthFlowChargeFlow from '@/assets/monthFlowChargeFlow.png';
import totalOderAmount from '@/assets/totalOderAmount.png';
export default {
  name: 'WriteOffData',
  provide() {
    return {
      writeOffData: this.writeOffData
    };
  },
  filters: {
    bigNumFilter,
    StairDataItem
  },
  components: {
    Title,
    DataInfoItem,
    StairDataItem,
    SecondLevelItem,
    MoreAmountItem
  },
  props: {
    id: {
      type: Number,
      default: null
    },
    writeOffData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    showRefreshTime: { // 是否可以展示刷新按钮
      type: Number | Boolean,
      default: false
    },
    showMobilePage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      monthUnChargeOff,
      monthFlowChargeFlow,
      totalOderAmount,
      chargeDataProp: [{
        name: '封账月份',
        prop: 'sealMonth',
        isNum: false
      }, {
        name: '封账发起时间',
        prop: 'sealCreateDate',
        isNum: false
      }, {
        name: '封账发起人',
        prop: 'sealCreator',
        isNum: false
      }, {
        name: '本次总封账订单金额',
        prop: 'sealTotalAmount',
        isNum: true
      }, {
        name: '本次总封账流水金额',
        prop: 'sealTotalFlow',
        isNum: true
      }, {
        name: '本次总封账核销金额',
        prop: 'sealTotalChargeOff',
        isNum: true
      }, {
        name: '本次总封账成本金额',
        prop: 'sealTotalCostAmount',
        isNum: true
      }, {
        name: '该月订单封账金额',
        prop: 'monthOrderSealAmount',
        isNum: true
      }, {
        name: '历史订单封账金额',
        prop: 'hisOrderSealAmount',
        isNum: true
      }, {
        name: '该月流水封账金额',
        prop: 'monthFlowSealAmount',
        isNum: true
      }, {
        name: '历史流水封账金额',
        prop: 'hsFlowSealAmount',
        isNum: true
      }, {
        name: '该月订单核销封账金额',
        prop: 'monthOrderSealChargeAmount',
        isNum: true
      }, {
        name: '历史订单核销封账金额',
        prop: 'hisOrderSealChargeAmount',
        isNum: true
      }, {
        name: '该月成本封账金额',
        prop: 'monthCostSealAmount',
        isNum: true
      }, {
        name: '历史成本封账金额',
        prop: 'hisCostSealAmount',
        isNum: true
      }, {
        name: '最新订单核销封账金额',
        prop: 'newOrderChargeSealAmount',
        isNum: true
      }, {
        name: '该月订单待核销金额',
        prop: 'monthOrderUnchargeAmount',
        isNum: true
      }, {
        name: '该月订单最新待核销金额',
        prop: 'newMonthOrderUnchargeAmount',
        isNum: true
      }, {
        name: '历史订单待核销金额',
        prop: 'hisOrderUnchargeAmount',
        isNum: true
      }, {
        name: '历史订单最新待核销金额',
        prop: 'hisOrderUnchargeAmount',
        isNum: true
      }, {
        name: '该月流水待核销金额',
        prop: 'monthFlowUnchargeAmount',
        isNum: true
      }, {
        name: '该月流水最新待核销金额',
        prop: 'newMonthFlowUnchargeAmount',
        isNum: true
      }, {
        name: '历史流水待核销金额',
        prop: 'hisFlowUnchargeAmount',
        isNum: true
      }, {
        name: '历史流水最新待核销金额',
        prop: 'newHisFlowUnchargeAmount',
        isNum: true
      }, {
        name: '该月订单该月流水核销金额',
        prop: 'monthOrderFlowChargeAmount',
        isNum: true
      }, {
        name: '该月订单历史流水核销金额',
        prop: 'monthOrderHisFlowChargeAmount',
        isNum: true
      }, {
        name: '历史订单该月流水核销金额',
        prop: 'monthHisOrderFlowChargeAmount',
        isNum: true
      }, {
        name: '历史订单历史流水核销金额',
        prop: 'hisOrderFlowChargeAmount',
        isNum: true
      }, {
        name: '最新订单该月流水核销金额',
        prop: 'newMonthOrderFlowChargeAmount',
        isNum: true
      }, {
        name: '最新订单历史流水核销金额',
        prop: 'newOrderHisFlowChargeAmount',
        isNum: true
      }],
      isOpen: false
    };
  },
  computed: {
    month() {
      if (this.writeOffData && this.writeOffData.sealMonth) {
        const temp = this.writeOffData.sealMonth.split('-');
        if (temp.length > 0) {
          return temp[1];
        } else {
          return '该';
        }
      }
      return '该';
    }
  },
  methods: {
    formatMonth(str = '') {
      if (!str) return '--';
      return str.replace(/-/g, '/');
    },
    getSeallBilData(id) {
      this.$emit('refreshData');
      // seallBilData(id).then(res => {
      //   if (res.code === 200) {
      //     this.writeOffData = res.data;
      //     this.$emit('getWriteOffData', res.data);
      //   }
      // });
    },
    onCopyClick() {
      let text = '';
      if (this.writeOffData) {
        for (const index in this.chargeDataProp) {
          const item = this.chargeDataProp[index];
          if (item.isNum) {
            text += `${item.name} : ${this.dataDetail(item.prop)}\n`;
          } else {
            text += `${item.name} : ${this.writeOffData[item.prop] || '--'}\n`;
          }
        }
      }
      this.$copyText(text).then(e => {
        this.$message({
          message: '封账统计数据已复制到剪贴板',
          type: 'success'
        });
      }, (e) => {
        console.error(e);
      });
    },
    dataDetail(propName) {
      if (this.writeOffData && propName in this.writeOffData) {
        if (this.writeOffData[propName] !== 0) {
          return this.writeOffData[propName] / 100;
        } else {
          return this.writeOffData[propName];
        }
      }
      return '--';
    },
    refreshData() {
      if (!this.showRefreshTime) return;
      this.$confirm('刷新封账发起时间后将更新封账数据及封账列表信息', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        lockScroll: false,
        center: true,
        customClass: 'del-message del-message-cancel',
        iconClass: 'del-icon'
      }).then(() => {
        sealBillRefresh(this.id).then(res => {
          if (res.code === 200) {
            this.getSeallBilData(this.id);
            this.$emit('refreshSuccess');
          }
        });
      }).catch(() => {});
    },
    toggle() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>
<style lang="scss" scoped>
.second-level-item-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: auto;
  padding: 0 27px;
  background: #f2f5fa;
  border-radius: 0px 0px 4px 4px;
  box-shadow: inset 0px 15px 10px -15px #d8deeb;
  @media screen and (max-width: 1366px) {
    padding: 0 16px;
    flex-direction: column;
  }
  &.second-level-item-wrap-br {
    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 16px;
      background-color: #DDE1EA;
      width: 1px;
      height: 64px;
    }
  }
}
.empty-btn-style {
  padding: 6px 5px;
  margin-left: 12px;
  border-color: #406EFF;
  background: #fff;
  color: #406EFF;
  cursor: pointer;
  &.disabled {
    cursor: not-allowed;
    border-color: #999;
    color: #999;
  }
  &.back-btn {
    height: 32px;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
  }
}
.data-info-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  margin-left: 24px;
  &::v-deep {
    .content {
      span {
        font-family: PingFangSC-Medium;
      }
    }
  }
}
.launch-time {
  display: flex;
  align-items: center;
  .refresh-btn {
    cursor: pointer;
    margin-left: 4px;
    font-size: 16px;
    color: #406EFF;
    &.disabled {
      color: #999;
      cursor: not-allowed;
    }
  }
}
.seal-data-content {
  .seal-data-column {
    display: flex;
    flex: 1;
  }
  .seal-data-row {
    display: flex;
    margin-left: 16px;
    align-items: center;
  }
}
.media-type-one {
  margin-right: 48px;
}
.media-type-two {
  margin-right: 32px;
}
.big-refresh-btn {
  display: block;
}
.refresh-btn {
  display: none;
}
@media screen and (max-width: 1275px) {
  .media-type-one {
    margin-right: 16px;
  }
  .media-type-two {
    margin-right: 8px;
  }
  .big-refresh-btn {
    display: none;
  }
  .refresh-btn {
    display: block;
  }
}
.w200 {
  width: 200px;
}
.seal-data-column-more {
  position: relative;
  flex-grow: 1;
  flex-direction: column;
  background: #fafafc;
}
.toggle {
  cursor: pointer;
  font-size: 14px;
  color: #406eff;
  em {
    margin-left: 6px;
  }
}
.seal-data-column-data {
  overflow: hidden;
  transition: all ease-in-out .5s;
}
.h40 {
  height: 40px;
}
.h100 {
  height: 100px;
}
.h-hight {
  height: 135px;
  // @media screen and (max-width: 1366px) {
  //   height: 212px;
  // }
}
.mobile-detail-wrap {
  margin: 0 !important;
  .title-box {
    display: flex;
    justify-content: space-between;
    ::v-deep .title-head {
      flex: unset;
    }
  }
  .title-btn {
    display: flex;
    align-items: center;
    .line {
      height: 14px;
      width: 1px;
      background-color: #DDE1EA;
      margin: 0 5px;
    }
  }
  .data-info-box-mobile {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 100%;
    margin: 12px 0 16px;
    .media-type-one, .media-type-two {
      margin-right: 0;
    }
    .data-info-mobile {
      flex: 1;
      border-right: 1px solid #DDE1EA;
      &:last-child {
        border-right: none;
      }
    }
    .media-type-two {
      width: 150px;
      flex: unset;
    }
  }
  .seal-data-content {
    .h-hight {
      height: 252px;
    }
    .seal-data-column {
      .seal-data-column-more {
        min-width: 40%;
        border-radius: 5px;
        margin-right: 16px;
        &:last-child {
          margin-right: 0;
        }
      }
      ::v-deep .stair-data-item {
        min-height: 100px;
        .label-ground {
          .label {
            white-space: nowrap;
          }
        }
      }
      ::v-deep .second-level-item {
        flex-direction: column;
        .amounts {
          margin-left: 0;
          .amount {
            line-height: 1;
            font-size: 18px;
            font-weight: 700;
            color: #333;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-top: 8px;
          }
        }
        .simple-label {
          white-space: nowrap;
        }
      }
    }
  }
}
.bold {
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 800;
  color: #333333;
  line-height: 15px;
}
.data-info-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-right: 5px;
}
</style>
